<template>
  <div :class="[useWeb ? 'tw-libsteps' : 'tw-steps', `x${_uid}`]">
  <template v-if="useWeb">
    <el-steps :active="currentActive"
      :finish-status="finishstatus"
      :align-center="aligncenter"
      :direction="direction"
      :process-status="processstatus"
      :simple="simple"
      :space="space">
      <el-step
        v-for="(step,idx) in steps"
        :key="idx"
        :title="step.title"
        :status="step.status"
        :description="step.description"
      >
      <div slot="icon" v-if="custicon" class="tw-steps-iconbox">
        <img v-if="icons[idx] && icons[idx] !== ''" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[idx].localPath}`" />
        <!-- <div v-html="step.icon"></div> -->
      </div>
      <template slot="title" v-if="custitle">
        <div v-html="step.title"></div>
      </template>
      <template slot="description" v-if="custdesc">
        <div v-html="step.description"></div>
      </template>
      </el-step>
    </el-steps>
  </template>
  <!-- 大屏模式 -->
  <template v-else>
    <el-steps ref="el-steps" :active="currentActive" finish-status="wait" align-center>
      <el-step
        v-for="step in steps"
        :key="step.id"
        :title="step.title"
        @mouseenter.native="handleEnter"
        @mouseleave.native="handleOut"
        @click.native="handleStepClick(step.id)"
      ></el-step>
    </el-steps>
  </template>
  </div>
</template>

<script>
const props = require('./props')

export default {
  name: 'chart-step-base',

  props,

  computed: {
    intervalTime () {
      return parseInt(this.intervalTimeString)
    },

    steps () {
      return this.data
    },

    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor
      }
    }
  },

  mounted () {
    let vm = this
    if (vm.useWeb) {
      if (vm.data.length > 0) {
        vm.currentActive = vm.data[0].active
      }
      // vm.setStyle()
    } else {
      vm.initData()
    }
  },

  data () {
    return {
      currentActive: 0,
      intervalid: 0
    }
  },
  methods: {
    initData () {
      let vm = this
      if (this.data.length > 0) {
        if (this.custValue) {
          vm.$emit('input', this.data[0].value)
          vm.$emit('change', this.data[0].value)
        } else {
          vm.$emit('input', 0)
          vm.$emit('change', 0)
        }
      }

      if (this.autoPlay) {
        this.intervalid = setInterval(() => {
          if (this.currentActive++ > this.steps.length - 2) this.currentActive = 0
        }, this.intervalTime)
      }
      this.$watch('currentActive', (val, oldVal) => {
        if (val !== oldVal) {
          if (vm.custValue) {
            vm.$emit('input', vm.data[vm.currentActive].value)
            vm.$emit('change', vm.data[vm.currentActive].value)
          } else {
            vm.$emit('input', vm.currentActive)
            vm.$emit('change', vm.currentActive)
          }
        }
      })
    },
    /**
     * 处理进度条点击事件
     * @param {Number} id 点击事件的id
     */
    handleStepClick (id) {
      this.currentActive = id
      if (this.custValue) {
        this.$emit('input', this.data[this.currentActive].value)
        this.$emit('change', this.data[this.currentActive].value)
      } else {
        this.$emit('input', this.currentActive)
        this.$emit('change', this.currentActive)
      }
    },
    handleEnter () {
      if (this.intervalid) {
        clearInterval(this.intervalid)
      }
    },
    handleOut () {
      if (this.autoPlay) {
        this.intervalid = setInterval(() => {
          if (this.currentActive++ > this.steps.length - 2) this.currentActive = 0
        }, this.intervalTime)
      }
    },
    setStyle () {
      let style = `
        .tw-libsteps.x${this._uid} {
          color: ${this.color};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }

        .tw-libsteps.x${this._uid} .el-step__line {
          background-color: ${this.lineBgColor};
        }

        .tw-libsteps.x${this._uid} .el-step__icon.is-text {
          background-color: ${this.iconBgColor};
        }

        .tw-libsteps.x${this._uid} .el-step__head.is-error {
          color: ${this.errorColor};
          border-color: ${this.errorColor};
        }
        .tw-libsteps.x${this._uid} .el-step__head.is-process {
          color: ${this.processColor};
          border-color: ${this.processColor};
        }
        .tw-libsteps.x${this._uid} .el-step__head.is-finish {
          color: ${this.finishColor};
          border-color: ${this.finishColor};
        }
        .tw-libsteps.x${this._uid} .el-step__head.is-success {
          color: ${this.successColor};
          border-color: ${this.successColor};
        }
        .tw-libsteps.x${this._uid} .el-step__head.is-wait {
          color: ${this.waitColor};
          border-color: ${this.waitColor};
        }
      `

      // if (this.iconBool) {
      //   style += `
      //   ::root > .tw-steps-iconbox  {
      //     width: ${this.iconWidth};
      //     height: ${this.iconHeight};
      //   }
      //     ::root > .tw-steps-iconbox  {
      //       border: 1px solid ${this.iconBorderColor};
      //       border-radius: ${this.iconBorderRadius};
      //       overflow: hidden;
      //     }
      //   `
      // }

      // if (this.iconsPosition === 'top') {
      //   style += `
      //     ::root > .tw-imginfo-item {
      //       display: block;
      //     }

      //     ::root > .tw-imginfo-item .tw-steps-iconbox {
      //       margin-bottom: 10px;
      //     }
      //   `
      // }

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    }
  },
  beforeDestroy () {
    if (this.intervalid) {
      clearInterval(this.intervalid)
    }
  },

  watch: {
    // noShowRightText () {
    //   this.init()
    // },
    // type () {
    //   this.setOption()
    // },

    data: {
      deep: true,
      handler () {
        if (this.useWeb) {
          this.currentActive = this.data[0].active
        } else {
          if (this.custValue) {
            this.$emit('input', this.data[0].value)
            this.$emit('change', this.data[0].value)
          } else {
            this.$emit('input', 0)
            this.$emit('change', 0)
          }
        }
      }
    },

    // option: {
    //   deep: true,
    //   handler () {
    //     this.setOption()
    //   }
    // }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
